<%--
  Created by IntelliJ IDEA.
  User: Htao
  Date: 2018/5/4
  Time: 15:30
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <meta charset="UTF-8">
    <title>注册页面</title>
    <script src="/static/js/jquery-1.11.3.min.js"/>

    <style type="text/css">
        html {
            background-color: aqua;
        }

        .login {
            position: absolute;
            top: 50%;
            left: 50%;
            margin: -150px 0 0 -150px;
            width: 300px;
            height: 300px;
        }

        .login h1 {
            color: #fff;
            text-shadow: 0 0 10px rgba(0, 0, 0, 0.96);
            letter-spacing: 1px;
            text-align: center;
        }

        input {

            margin-bottom: 10px;
            background: rgba(0, 0, 0, 0.3);
            border: none;
            outline: none;
            padding: 10px;
            font-size: 13px;
            color: #fff;
        }

    </style>
    <script>
        $(function () {
            /**
             * validate所有的错误信息默认写到<label>标签中去
             */
            //获取需要校验的表单，调用validate方法
            $("#registForm").validate({
                //规则
                rules: {
                    //对指定的字段设置校验的规则
                    user: {
                        required: true,
                        minlength: 4
                    },
                    password: {
                        required: true,
                        digits: true,
                        rangelength: [6, 6]
                    },
                    repassword: {
                        required: true,
                        equalTo: "[name='password']"
                    },
                    email: {
                        required: true,
                        email: email
                    },
                    username: {
                        required: true,
                        minlength: 4,
                        maxlength: 10
                    },
                    sex: {
                        required: true
                    },
                    birthday: {
                        required: true
                    }
                },
                //校验失败给出的错误提示信息
                messages: {
                    user: {
                        required: "用户名不能为空",
                        minlength: "长度不得低于4位"
                    },
                    password: {
                        required: "密码不能为空",
                        digits: "密码必须是数字",
                        rangelength: "长度必须是6位"
                    },
                    repassword: {
                        required: "确认密码不能为空",
                        equalTo: "两次输入密码不一致"
                    },
                    email: {
                        required: "邮箱不能为空",
                        email: "邮箱格式不正确"
                    },
                    username: {
                        required: "用户名不能为空",
                        minlength: "长度不得低于4位",
                        maxlength: "长度不得超过10位"
                    },
                    sex: {
                        required: "性别必选"
                    },
                    birthday: {
                        required: "生日必填"
                    }
                },
                success: function (label) {//回调函数：指定字段校验成功之后执行这个函数
                    //1.清空label标签中的错误提示信息
                    $(label).text("");
                    //2.添加样式
                    $(label).addClass("success");
                }

            });
        });
    </script>
</head>
<body>
<div class="login">
    <h1>客户注册</h1>

    <form id="formId" action="${pageContext.request.contextPath }/user/addUser" method="post">


        <td style="padding-left: 30px">
            用户名:
        </td>
        <td><span id="usernamespan"></span></td>
        <td>
            <input type="text" name="username" id="username" style="width: 100%"/>
        </td>


        <td style="padding-left: 30px">
            年龄:
        </td>
        <td><span id="agespan"></span></td>
        <td>
            <input type="text" name="age" id="age" style="width: 100%"/>
        </td>

        <td style="padding-left: 30px">性别:</td>
        <td>
            <input type="radio" name="sex" value="male" checked/>男
            <input type="radio" name="sex" value="female"/>女
        </td>
        <br>

        <td style="padding-left:30px">密码:</td>
        <td><span id="passwordspan"></span></td>
        <td>
            <input type="password" name="password" id="password"
                   style="width: 100%"/>
        </td>


        <td style="padding-left: 15px">密码确认:</td>
        <td><span id="password2span"></span></td>
        <td>
            <input type="password" name="password2" id="password2"
                   style="width: 100%"/>
        </td>

        <td><input type="submit" value="注册">
            <input type="reset" value="重置">

        </td>
        <td><a href="../../login.jsp">登录</a>
        </td>

    </form>

</div>
</body>
</html>
